// 颜色变量
$colors: (
        '3': #333,
        '6': #666,
        '9': #999,
        'c': #ccc,
        'f': #fff,
        '0': #000
);


$sizes: (
        's':22px,
        'm':24px,
        'x':26px,
        'l':28px,
        'xl':30px,
        'xxl':32px,
        'lx':34px
);

// 配置变量
$spacing-base: 10px;
$spacing-multipliers: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
$spacing-directions: (
        't': 'top',
        'b': 'bottom',
        'r': 'right',
        'l': 'left',
        'x': ('left', 'right'),
        'y': ('top', 'bottom'),
        '': 'all'
);

// 生成间距类
@mixin generate-spacing($property, $prefix) {
  @each $multiplier in $spacing-multipliers {
    $size: $multiplier * 10;

    @each $dir-prefix, $direction in $spacing-directions {
      $class-name: if(
                      $dir-prefix == '',
                      '.#{$prefix}',
                      '.#{$prefix}#{$dir-prefix}'
      );

      #{$class-name}-#{$size} {
        @if $direction == 'all' {
          #{$property}: #{$size}px;
        } @else if type-of($direction) == 'list' {
          @each $dir in $direction {
            #{$property}-#{$dir}: #{$size}px;
          }
        } @else {
          #{$property}-#{$direction}: #{$size}px;
        }
      }
    }
  }
}

// 生成所有间距
@include generate-spacing(margin, 'm');
@include generate-spacing(padding, 'p');


// 常用颜色
@each $key, $value in $colors {
  .f-c-#{$key} {
    color: $value;
  }
}

// 文字大小
@each $key, $value in $sizes {
  .f-s-#{$key} {
    font-size: $value;
  }
}

// 布局
@mixin flex($direction: row, $align: stretch, $justify: flex-start) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
}

.flex {
  @include flex(row, center, flex-start);
}

.flex-end {
  @include flex(row, stretch, flex-end)
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

.flex-c-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-color {
  background: linear-gradient(#fff, #000);
}

.fw-600 {
  font-weight: 600;
}

.money {
  color: #ff2f20;
}

@for $i from 1 through 3 {
  .ellipsis-#{$i} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i;
    overflow: hidden;
  }
}
@for $i from 3 through 5 {
  .flex-grid-#{$i} {
    display: grid;
    grid-template-columns: repeat(#{$i},1fr);
    align-items: center;
    justify-content: center;
  }
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.before-tag {
  &::before {
    content: "";
    padding-left: 10px;
    border-left: 8px #ff7100 solid;
  }
}

.bottom-tag {
  position: relative;
  z-index: 2;
  width: fit-content;

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    z-index: -1;
    background: rgba(253, 119, 83, 0.4);
    bottom: 0;
    left: 0;
  }
}

.text-center {
  text-align: center;
}


.img-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.work-tag {
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 10px;
  color: #9d9d9d;
  font-size: 24px;
  margin: 10px 10px 0 0;
  flex-shrink: 0;
  width: fit-content;
}